<template>
    <div>
        <el-card>
            <el-table border stripe :data="skuList" v-loading="loading">
                <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
                <el-table-column label="名称" prop="skuName"></el-table-column>
                <el-table-column label="描述" prop="skuDesc"></el-table-column>
                <el-table-column label="默认图片">
                    <template v-slot="{ row, $index }">
                        <el-image :src="row.skuDefaultImg" style="width: 100px; height: 80px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="重量" prop="weight"></el-table-column>
                <el-table-column label="价格" prop="price"></el-table-column>
                <el-table-column label="操作" width="250" align="center">
                    <template v-slot="{ row, $index }">
                        <el-button v-if="row.isSale === 0" type="success" size="small" icon="ele-Top" title="上架" @click="onSale(row.id)" v-has="'btn.Sku.updown'"></el-button>
                        <el-button v-else type="info" size="small" icon="ele-Bottom" title="下架" @click="cancelSale(row.id)" v-has="'btn.Sku.updown'"></el-button>
                        <el-button type="warning" size="small" icon="ele-Edit" title="修改sku" @click="editSku" v-has="'btn.Sku.update'"></el-button>
                        <el-button type="info" size="small" icon="ele-InfoFilled" title="查看sku详情" @click="getSkuInfo(row.id)" v-has="'btn.Sku.detail'"></el-button>
                        <el-button type="danger" size="small" icon="ele-Delete" title="删除sku" @click="deleteSku(row.id)" v-has="'btn.Sku.remove'"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--  -->
            <el-pagination v-model:currentPage="page" v-model:page-size="limit" :total="total" :pager-count="7" layout="prev, pager, next, jumper" />
        </el-card>
        <!--
            v-model="drawer"对应的就是抽屉的开关，需要自己定义
            size="50%" 相对视口拉出多少
        -->
        <el-drawer v-model="drawer" size="50%" :with-header="false" title="I am the title">
            <el-row class="row">
                <el-col :span="5" class="col-left">名称</el-col>
                <el-col :span="16">{{ skuInfo.skuName }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="5" class="col-left">描述</el-col>
                <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="5" class="col-left">价格</el-col>
                <el-col :span="16">{{ skuInfo.price }}</el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="5" class="col-left">平台属性值</el-col>
                <el-col :span="16">
                    <el-tag type="danger" v-for="(attrValue, index) in skuInfo.skuAttrValueList" :key="attrValue.id">
                        {{ attrValue.valueName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="5" class="col-left">销售属性值</el-col>
                <el-col :span="16">
                    <el-tag type="danger" v-for="(saleAttrValue, index) in skuInfo.skuSaleAttrValueList" :key="saleAttrValue.id">
                        {{ saleAttrValue.saleAttrValueName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="5" class="col-left">商品图片</el-col>
                <el-carousel class="carousel" trigger="click" height="400px" arrow="always" indicator-position="outside" ref="carousel">
                    <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                        <el-image :src="item.imgUrl" style="width: 400px; height: 400px" justify="center"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </el-row>
        </el-drawer>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Sku",
});
</script>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from "vue";
import type { skuInfoListType } from "@/types/sku";
import { reqAllSkuList, reqOnSale, reqCancelSale, reqSkuInfo, reqDeleteSku } from "@/api/sku";
import { ElCarousel, ElMessage } from "element-plus";
import type { skuInfoItemDetailType } from "@/types/sku";

const skuList = ref<skuInfoListType>([]);
const page = ref(1);
const limit = ref(10);
const total = ref(0);
const loading = ref(false);
// 封装获取sku列表的方法
const getAllSkuList = async () => {
    loading.value = true;
    try {
        const res = await reqAllSkuList(page.value, limit.value);
        skuList.value = res.records;
        total.value = res.total;
        // 解决轮播图不显示的问题
        await nextTick(() => {
            carousel.value?.setActiveItem(0);
        });
        loading.value = false;
    } catch (e: any) {
        ElMessage.error(e.message);
        loading.value = false;
    }
};
// 初始化sku列表
onMounted(() => {
    getAllSkuList();
});
// 监听page和limit的变化
watch(page, () => {
    getAllSkuList();
});

// 上架和下架
const onSale = async (id: number) => {
    try {
        await reqOnSale(id);
        ElMessage.success("上架成功");
        await getAllSkuList();
    } catch (e: any) {
        ElMessage.error(e.message);
        loading.value = false;
    }
};
const cancelSale = async (id: number) => {
    try {
        await reqCancelSale(id);
        ElMessage.success("下架成功");
        await getAllSkuList();
    } catch (e: any) {
        ElMessage.error(e.message);
        loading.value = false;
    }
};
// 修改sku
const editSku = () => {
    ElMessage.warning("功能开发中...");
};
// 删除sku
const deleteSku = async (id: number) => {
    try {
        await reqDeleteSku(id);
        ElMessage.success("删除成功");
        await getAllSkuList();
    } catch (e: any) {
        ElMessage.error(e.message);
        loading.value = false;
    }
};
/*
 * @description: 查看sku详情
 * */

// 抽屉
const drawer = ref(false);
const skuInfo = ref({} as skuInfoItemDetailType);
const getSkuInfo = (id: number) => {
    try {
        loading.value = true;
        reqSkuInfo(id).then(res => {
            skuInfo.value = res;
            drawer.value = true;
            loading.value = false;
        });
    } catch (e: any) {
        ElMessage.error(e.message);
        loading.value = false;
    }
};
const carousel = ref<InstanceType<typeof ElCarousel>>();
</script>

<style scoped lang="scss">
.carousel {
    width: 400px;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.row {
    margin-bottom: 20px;

    .col-left {
        font-weight: bold;
    }
}
</style>
